import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
// import Referral  from './pages/referral/index'
// import MusicScore from '../musicScore/index';
import { BrowserRouter as Router,Route ,withRouter} from 'react-router-dom';
import styles from './style.module.scss';
import Loadable from 'react-loadable';
import LoadingComponent from '../../Loading';
const AsyncReferral = Loadable({
    loader: () => import('./pages/referral/index'),
    loading: LoadingComponent
  })
  const AsyncMusicScore = Loadable({
      loader: () => import('../musicScore/index'),
      loading: LoadingComponent
    })
class courseReferral extends PureComponent {
    render() {
        const pathname = this.props.history.location.pathname;
        return (
            <div className={styles['wrap']}>
                {/* <Router >
                    <div>
                        <Route exact path="/courseReferral/1" component={Referral} />     
                        <Route exact path="/courseReferral/2" component={musicScore} />                                                                                                                                                                                                                                                                                                                                                                                                                                   
                    </div>
                </Router> */}
                <div>
                    {
                        (()=>{
                            
                            if (pathname === '/courseReferral/2') {
                                return (<AsyncReferral/>)
                            } else if (pathname === '/courseReferral/3') {
                                return (<AsyncMusicScore/>)
                            }
                        })()
                    }
                </div>
                <footer className={styles['footer']}>
                    {
                        (()=>{
                            let iconPath = 'https://mobuz-mp.gz.bcebos.com/matter/select_the_homework_not_selected@2x.png';
                            let selectedIcon = 'https://mobuz-mp.gz.bcebos.com/matter/select_the_homework_selected@2x.png';
                            return (
                                <div onClick={(()=>{this.props.history.push('/courseReferral/1')})}>
                                    <img src={pathname === '/courseReferral/1' ? selectedIcon: iconPath} alt=""/>
                                    <span className={pathname === '/courseReferral/1' ? styles['active'] : ''}>精选作业</span>
                                </div>
                            )
                        })()
                    }
                    {
                        (()=>{
                            let iconPath = 'http://mobuz-mp.cdn.bcebos.com/matter/course_description_not_selected@2x.png';
                            let selectedIcon = 'http://mobuz-mp.cdn.bcebos.com/matter/course_description_selected@2x.png';
                            return (
                                <div onClick={(()=>{this.props.history.push('/courseReferral/2')})}>
                                    <img src={pathname === '/courseReferral/2' ? selectedIcon: iconPath} alt=""/>
                                    <span className={pathname === '/courseReferral/2' ? styles['active'] : ''}>课程介绍</span>
                                </div>
                            )
                        })()
                    }
                    {
                        (()=>{
                            let iconPath = 'http://mobuz-mp.cdn.bcebos.com/matter/music_score_not_selected@2x.png';
                            let selectedIcon = 'http://mobuz-mp.cdn.bcebos.com/matter/music_score_selected@2x.png';
                            return (
                                <div onClick={(()=>{this.props.history.push('/courseReferral/3')})}>
                                    <img src={pathname === '/courseReferral/3' ? selectedIcon: iconPath} alt=""/>
                                    <span className={pathname === '/courseReferral/3' ? styles['active'] : ''}>曲谱</span>
                                </div>
                            )
                        })()
                    }
                </footer>
            </div>
        )
    }
}
export default connect(null, null)(withRouter(courseReferral));